<!DOCTYPE html>
<html>
<#include "include/header.html"/>
  <body id="game" class="pocket pocket2">
    <div class="page">
      <div class="content">
        <img src="${ctx}/resource/images/wx/banner.png" class="banner">
        <div class="wrap">
         <#if championUser??>
				 <div class="info">
                     <div class="coins">我的活力币：<span id="myEnergyCurrency">${championUser.energy_currency!}</span></div>
                 </div>  
				
				</#if>
          <!-- 导航栏 -->
          <nav>
            <ul>
              <li><a href="${ctx}/home/homePage"><img src="${ctx}/resource/images/wx/btn1.png"></a></li>
              <li><a href="${ctx}/home/forwardEuropeGuessing"><img src="${ctx}/resource/images/wx/btn2.png"></a></li>
            </ul>
          </nav>
       
          <!-- 红包 -->
          <div id="pocket">
            <img src="${ctx}/resource/images/game/pocket/congrats.png" class="congrats">
            <h2>恭喜你</h2>
            <h3>成功获得<span>1</span>个微博红包</h3>
            <img src="${ctx}/resource/images/game/pocket/pocket.png" class="pocket-img">
            <img src="${ctx}/resource/images/game/pocket/btn.png" class="btn" onclick="checkPocket()" id="pocketimg"> <!-- 点击查看红包 -->
          </div>
        </div>
        
        <!-- 查看红包，填写信息 -->
        <div class="dialog success">
          <div class="d-body">
            <div class="inner">
              <img src="${ctx}/resource/images/game/pocket/success_head.png">
              <div class="money" id="get_money">
                188.00
              </div>
              <p>
							请准确填写以下信息，否则将视为自动放弃奖品。<span>（奖品发放等信息请关注@小样君 官微微信）</span>
						</p>
              <form>
                <div class="row">
                  <label>姓名：</label>
                  <input id="real_name" type="text" />
                </div>
                <div class="row">
                  <label>电话：</label>
                  <input id="telephone" type="tel" />
                </div>
                <div class="row">
                  <label>支付宝账号：</label>
                  <input id="pay_account" type="text" />
                </div>
                <div class="row form-msg"></div>
              </form>
            </div>
          </div>
          <div class="d-footer">
            <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn btns back" alt="" onclick="dialogPocketClose()"> <!--返回按钮-->
            <img src="${ctx}/resource/images/index/dialog_btn_yes.png" class="btn btns yes" alt="" onclick="submit()"> <!--确认按钮-->
          </div>
        </div>

        <!-- 查看失败 -->
        <div class="dialog fail">
          <div class="d-body" id="fail-message">
            <p class="message">系统繁忙 请稍后再试</p>
          </div>
          <div class="d-footer">
            <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn one back" alt="" onclick="dialogClose()"> <!--返回按钮-->
          </div>
        </div>
           <!-- 兑换成功 -->
      <div class="dialog exchange-success">
        <div class="d-body" >
        </div>
        <div class="d-footer">
          <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn one back" alt="" onclick="dialogClose()"> <!--返回按钮-->
        </div>
      </div>
      </div>
    </div>
    <div class="mask"></div>
    <#include "include/foot.html"/>
    <script>
 var exchang_id="";
 <#if championUserExchang??>
       var prisze_name="${championUserExchang.prisze!}";
        exchang_id="${championUserExchang.id!}";
        $(".money").text(prisze_name)
        styleMoney()
        dialog(".success");
 </#if>
 function styleCoin() {
        var str = $(".coins").find("span").text().trim();
        var html = "";
        for (var i = 0; i < str.length; i++) {
          if (str.length > 4) {
            html += ('<span class="coin-sm">' + str[i] + '</span>')
          } else if (str.length > 3) {
            html += ('<span class="coin-md">' + str[i] + '</span>')
          } else {
            html += ('<span class="coin-lg">' + str[i] + '</span>')
          }
        }
        $(".coins").find("span").html(html)
      }

     // styleCoin();
function dialogPocketClose(){
			   window.location.href="${ctx}/home/homePage";
			}

      //给金钱数字加上样式
      function styleMoney() {
        var str = $(".money").text().trim();
        var html = "";
        for (var i = 0; i < str.length; i++) {
          if ( i == str.length - 1 ) {
            html += ('<span class="money-style-0">' + str[i] + '</span>')
          } else if ( i == str.length - 2 ) {
            html += ('<span class="money-style-1">' + str[i] + '</span>')
          } else if ( i == str.length - 3 ) {
            html += ('<span class="money-style-2">' + str[i] + '</span>')
          } else {
            html += ('<span class="money-style-3">' + str[i] + '</span>')
          }
        }
        $(".money").html(html)
      }
      var isClick=true;
      function checkPocket() {
    	  if(isClick){
    		  isClick=false;
    		  //$("#pocketimg").attr("disabled","disabled");
    	         statistics(); //cnzz统计
    	         $.post("${ctx}/home/pocketExchang",{
    	        	 content:"我在#来吧冠军#小样乳酸盐杯·全民冠军赛的拼手气环节中，成功兑换到了“用户抽到的奖品”！据说还有一大波豪礼及现金红包正在路上，你也来和我拼下手气吧！http://lbgj.fansiji.com/xyChampion/home/homePage?source=prize",
    	        	 pic:"/alidata/server/tomcat-7.0.54/webapps/xyChampion/resource/images/index/qd_dialog_banner_1.jpg"
    	         },function(data){
    		        	 if(data.code==0){
    		        	       //请求成功
    		        	        $("#myEnergyCurrency").html(data.myEnergyCurrency);
    		        	        var amount=data.prizse_name;
    		        	        exchang_id=data.exchang_id;
    		        	        $(".money").text(amount)
    		        	        styleMoney()
    		        	        dialog(".success");
    		        	        isClick=true;
    		        	         //window.location.href="${ctx}/home/forwardPocket?exchang_id="+data.exchang_id+"&prize_pic_url="+data.prize_pic_url+"&prizse_id="+data.prizse_id+"&prizse_name="+data.prizse_name;
    		       		}else{
    		       				$("#myEnergyCurrency").html(data.myEnergyCurrency);
    		             	    var msgHtm = "<p class='message'>" + data.msg + "</p>";
    							$("#fail-message").html(msgHtm);
    							dialog(".fail");
    							isClick=true;
    		     	   }
    		        //$("#pocketimg").removeAttr("disabled");  
    	           },'json');
    	  }
      }

      //提交个人信息
      function submit() {
      statistics(); //cnzz统计
            var realName = $("#real_name").val();
			var telephone = $("#telephone").val();
			var pay_account = $("#pay_account").val();
			if (realName == null || telephone == null || pay_account == null
					|| realName == "" || telephone == "" || pay_account == "") {
				/* var msgHtm = "<p class='message'>请填写完整信息</p>";
				$("#fail_message").html(msgHtm);
				dialog(".fail"); */
				onError("请填写完整信息");
				return;
			}
			$.post("${ctx}/home/ExchangPocketPrize", {
				id : exchang_id,
				realName : realName,
				telephone : telephone,
				pay_account : pay_account
			}, function(data) {
				if (data.code == 0) {
					dialog(".exchange-success");
				} else {
					var msgHtm = "<p class='message'>" + data.msg + "</p>";
					$("#fail-message").html(msgHtm);
					dialog(".fail");
				}
			});
			
			
      }
    </script>
</html>